import Imagelocation from '@/components/Imagelocation';
import utils from '@/utils';
import { ScrollView, View } from '@tarojs/components';
import React from 'react';
import { AtFloatLayout } from 'taro-ui';
import './index.scss';

function getSelOption(good) {
  let optionSelObj = JSON.parse(good.optionValue);

  return Object.keys(optionSelObj).map((key) => {
    return optionSelObj[key];
  });
}

const Sold = ({ goods = [], onClose }) => {
  const isOpened = goods?.length;

  return (
    <View className="CartSold" catchMove>
      <AtFloatLayout isOpened={isOpened} onClose={onClose}>
        <View className="close"></View>

        <View className="sold-head">
          <View>购物车中以下商品已售罄</View>
        </View>

        <ScrollView
          scrollY
          className="product-list"
          style={{
            maxHeight: utils.getCalcHeight(947, 155, 210),
          }}
        >
          {goods.map((good, index) => {
            return (
              <View className="product" key={index}>
                <View className="product-image">
                  <Imagelocation className="gIcon" src={good.productReleaseImg} />
                </View>
                <View className="product-base">
                  <View className="product-name">{good.productReleaseTitle}</View>
                  <View className="product-sku">{getSelOption(good).join('/')}</View>
                  <View className="product-price">¥{good.price}</View>
                </View>

                <View className="product-number-sel">x {good.num}</View>
              </View>
            );
          })}
        </ScrollView>

        <View className="action-button" onClick={onClose}>
          <View className="action-button-txt">继续选购</View>
        </View>
      </AtFloatLayout>
    </View>
  );
};

export default Sold;
